<template>
  <div>
    <p-modal
      :title="title"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <p-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >

      <p-form-model-item ref="lineid" label="线体" prop="lineid">
        <p-select v-model="form.lineid" @change="lineChange">
          <p-select-option v-for="(item, index) in proLineList" :key="index" :value="item.id+''">
            {{item.wpname}}
          </p-select-option>
        </p-select>
      </p-form-model-item>
      <p-form-model-item ref="workroomname" label="车间" prop="workroomname">
        <p-input
          disabled
          v-model="form.workroomname"
        />
      </p-form-model-item>

        <p-form-model-item
          ref="workStationName"
          label="工站"
          prop="workStationName"
        >
          <p-tree-select
            @change="pidChange"
            tree-data-simple-mode  
            v-model="form.workStationName"      
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :tree-data="treeData"
            placeholder="请选择工站"
          />
        </p-form-model-item>

        <p-form-model-item
          ref="process"
          label="工序"
          prop="process"
        >
          <p-input 
          disabled
          v-model="form.process" />
        </p-form-model-item>

        <p-form-model-item
          ref="coefficient"
          label="系数"
          prop="coefficient"
        >
          <p-input v-model="form.coefficient" />



        </p-form-model-item>

        <p-form-model-item ref="remark" label="备注" prop="remark">
          <p-input v-model="form.remark" />
        </p-form-model-item>
      </p-form-model>
    </p-modal>
  </div>
</template>
<script>
import { postAction, getAction, putAction, deleteAction } from "@/api/manage";
import { getDictItemsArr } from "@/utils/util";

export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,
      labelCol: { span: 8 },
      wrapperCol: { span: 12 },
      state: "add",
      form: {
        workroomname: '',
        linename: "",
        process: "",
        workStationName: "",
        coefficient: "",
        remark: "",
      },
      rules: {
        workroomname: [
          { required: true, message: "请输入车间", trigger: "blur" },
        ],
        lineid: [
          { required: true, message: "请选择线体", trigger: "blur" },
        ],
        process: [
          { required: true, message: "请输入工序", trigger: "blur" },
        ],
        workStationName: [
          { required: true, message: "请输入工站", trigger: "blur" },
        ],
        coefficient: [
          { required: true, message: "请输入系数", trigger: "blur" },
        ],
      },
      treeData: [
        // { id: 1, pId: 0, value: 1, title: "顶级节点", processlayer: 0 },
      ],      
      proLineList: [],
      // 假期分类数字字典
      holidayTypeKeys: {},      
      url: {
        add: "/mes-manpower/mesHrDeviceStimulateRule",
        edit: "/mes-manpower/mesHrDeviceStimulateRule",
        proLineList: '/basic-business/mesBaArchitecture/proLineList',  // 线体列表
        mesPeDefinition: "/mes-craft/craft/mesPeDefinition/search/tree", // 根据工序编码和名称搜索工序
      },
    };
  },

  computed: {
    title(){
      return this.state == 'add' ? '新增' : '编辑'
    }
  },

  mounted() {
    this.getAjaxGetDictItems()
    this.getMesPeDefinition()
    this.getProLineList()
  },
  methods: {

    // 获取，工序 工站  树结构
    getMesPeDefinition(){
      getAction(this.url.mesPeDefinition).then( res => {
        if(res.success) {
          const fn = (children) => {
            children.forEach(ele => {
              this.treeData.push({
                id: ele.id,
                pId: ele.pid,
                value: ele.id,
                // title:  ele.processmcode + ' ' + ele.processmname,
                title: ele.processmname,
                isLeaf: !ele.hasChild,
                processlayer: ele.processlayer,
                disabled: ele.processlayer < 3,
              }); 
              ele.hasChild && fn(ele.children)            
            })
          }
          fn(res.data)
        }
      } )
    },


    // 树节点选择事件
    pidChange(val, label, extra) {
      console.log(val,);
      console.log(label,);
      console.log(extra.triggerNode.dataRef);
      const pId = extra.triggerNode.dataRef.pId
      console.log(pId);
      
      this.treeData.forEach( ele => {
        if(pId == ele.id) {
          console.log(ele);
          
          this.form.process = ele.title
        }
      } )
    },

    // 获取线体列表
    getProLineList(){
      getAction(this.url.proLineList).then( res => {
        if(res.success) {
          this.proLineList = res.data
        }
      } )
    },

    // 选择线体
    lineChange(val){
      this.proLineList.forEach( ele => {
        if(val == ele.id) {
          this.form.workroomid = ele.fwpid
          this.form.workroomname = ele.fwpname
          this.form.workroomno = ele.fwpno
          this.form.linename = ele.wpname
          this.form.lineno = ele.wpno
        }
      } )
    },    

    // 获取数字字典
    getAjaxGetDictItems() {
      const arr = [
        { code: "mes_holiday_type", key: "holidayTypeKeys" },
      ];
      getDictItemsArr(this, arr);
    },

    showModal(record) {
      if (record) {
        this.state = "edit";
        for (let key in this.form) {
          this.form[key] = record[key];
        }
        this.editId = record.id;
      } else {
        this.state = "add";
      }


      this.visible = true;
    },
    handleOk(e) {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const params = JSON.parse(JSON.stringify(this.form));
          params.type = 3
          this.confirmLoading = true;
          if (this.state == "add") {
            postAction(this.url.add, params).then((res) => {
              if (res.success) {
                this.handleCancel()
                this.$emit("handleSuccess");
              } else {
                this.$message.error(res.msg);
              }
              this.confirmLoading = false;
            });
          }

          if (this.state == "edit") {
            params.id = this.editId;
            putAction(this.url.edit, params).then((res) => {
              if (res.success) {
                this.handleCancel()
                this.$emit("handleSuccess");
              } else {
                this.$message.error(res.msg);
              }
              this.confirmLoading = false;
            });
          }
        }
      });
    },
    handleCancel(e) {
      this.visible = false;
      Object.assign(this.form, this.$options.data().form);
      this.$refs.ruleForm.resetFields()
    },
  },
};
</script>
